<!DOCTYPE html>
<!-- 通过 xmlns:th=”http://www.thymeleaf.org“ 命令空间，将静态页面转换为动态的视图，
需要进行动态处理的元素,将使用“th:”前缀。 -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>电子书列表</title>

    <link rel="stylesheet" href="webjars/bootstrap/3.4.1/css/bootstrap.css">
    <script src="webjars/jquery/3.6.0/jquery.js"></script>
    <script src="webjars/bootstrap/3.4.1/js/bootstrap.js"></script>

    <link rel="stylesheet" href="css/nav.css">
    <link rel="stylesheet" href="css/categoryList.css">


</head>

<body>
<div class="container">

    <!--菜单导航区域-->
    <div th:replace="nav :: nav"></div>

    <!-- 类型标题--->
    <div class="category-title">
        电子书下载 ·
        <span th:each="cateItem : ${categoriesList } " th:if="${ (cateItem.cateId+'')==(param.cateId+'' ) }"   > [[ ${cateItem.cateName } ]] </span>
    </div>

    <!-- 多条件查询 -->
    <div class="config-query">
        <div class="row order-method">
            <div style="font-weight: bold;">排序方式:</div>
            <div class="conf-option"><a href="javascript:void(0);">最新排行</a></div>
            <div class="conf-option"><a href="javascript:void(0);">排行前三</a></div>
            <div class="conf-option"><a href="javascript:void(0);">访问最多</a></div>
            <div class="conf-option"><a href="javascript:void(0);">推荐最多</a></div>
        </div>

    </div>

    <!-- 分类列表 -->
    <div class="categoryInfo-list">
        <ul>
            <li th:each="item : ${novelCateList }">
                <div class="left">
                    <img th:src="${item.photo}" style="width: 100px;height: 150px;">
                </div>
                <div class="right">
                    <div class="top">
                        <a th:href="@{/toNovelDetail(novelId=${item.novelId}) }"> [[ ${item.title } ]] </a> <span>[发布于 [[ ${item.pushTime } ]] ]</span>
                    </div>
                    <div class="intro">
                        文案:
                        <p>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            [[ ${item.content } ]]
                        </p>
                    </div>
                    <div class="bottom">
								<span>
									<span>学校校长:</span>
									<span> [[ ${item.authorName } ]] </span>
								</span>
                        <span>
									<span>历史:</span>
									<span>
                                        <span th:if="${item.progress==0}">古老</span>
                                        <span th:if="${item.progress==1}">新颖</span>
									</span>
								</span>

                        <span>
									<span>文理分科:</span>
									<span>
										<span th:each="cateItem : ${categoriesList }" th:if="${ (cateItem.cateId+'')==(param.cateId+'' ) }"> [[ ${cateItem.cateName } ]] </span>
									</span>
								</span>
                    </div>
                </div>
            </li>

        </ul>
    </div>

</div>

</body>
</html>


<script type="text/javascript">

    if ([[ ${selectIndex[0]} ]]!=-1){
        $($(".order-method .conf-option").get( [[ ${selectIndex[0]} ]] )).addClass("conf-option-select");
    }

    if ([[ ${selectIndex[1]} ]]!=-1){
        $($(".file-size .conf-option").get( [[ ${selectIndex[1]} ]] )).addClass("conf-option-select");
    }


    $(function () {
        $(".config-query .conf-option").click(function () {

            //将所有选中样式清空
            $(this).parent().children().removeClass("conf-option-select");
            //为点击事件源添加样式
            $(this).addClass("conf-option-select");

            //获取排序和文件大小选项
            if ($(".order-method .conf-option-select").get(0)) {
                var orderMethod = $(".order-method .conf-option-select").get(0).innerText;

            }

            if ($(".file-size  .conf-option-select").get(0)) {
                var fileSize = $(".file-size  .conf-option-select").get(0).innerText;
            }

            var orderIndex='';
            var fileIndex='';
            $(".order-method .conf-option").each(function (index, item) {
                if ($(item).hasClass("conf-option-select")) {
                    orderIndex = index
                }
            })
            $(".file-size .conf-option").each(function (index, item) {
                if ($(item).hasClass("conf-option-select")) {
                    fileIndex = index
                }
            })


            console.log(orderIndex, fileIndex)
            window.location.href = "toCategory?cateId="+[[${param.cateId } ]] + "&fileIndex=" + fileIndex + "&orderIndex=" + orderIndex

        })
    })
</script>
   


